<template>
  <div class="overview-box">
    <div style="height: calc(100% - 45px)">
      <nl-report
        @dataReady="dataReady"
        @changeDate="changeDate"
        :defaultTime="defaultTime"
        showTime
        :dateRange="dateRange"
        :chartLayoutName="chartLayoutName"
        :mixinParam="mixinParam"
      ></nl-report>
    </div>
  </div>
</template>

<script>
/* prop属性
chartLayoutName: {}, 报表英文标识，用于获取报表具体数据
mixinParam: {},      数据源参数为变量字符串时统一替换成mixinParam内属性
showTime: {          是否显示起始时间组件，组件只针对折线图生效
type: Boolean,
default: false
},
noEditing: {         是否隐藏编辑按钮，默认不隐藏
type: Boolean,
default: false
},
dateRange: {         起始时间可选范围dateRange.startLine为最早时间，dateRange.endLine为最晚时间，格式都为秒级时间戳
type: Object,
default() {
return {}
}
},
defaultTime:{        默认起始时间，defaultTime长度为2，defaultTime[0]是开始时间，defaultTime[1]是结束时间，格式都为秒级时间戳
type: Array
}

*/
/*event事件
 * @changeDate         时间组件的change事件，参数为选择的起始时间数组，格式和defaultTime一致
 * @dataReady          报表内所有数据加载完之后的事件，无参数
 * */
export default {
  name: 'newAppOverview',
  data() {
    return {
      defaultTime: [
        new Date().getTime() - 7 * 24 * 3600 * 1000,
        new Date().getTime(),
      ],
      breadArr: [
        { name: '我的应用', url: '' },
        { name: '概览', url: '/business/reportmgr/appOverview' },
      ],
      chartLayoutName: 'demoReport',
      dateRange: {
        startLine: new Date().getTime() - 1000 * 3600 * 24 * 3,
        endLine: new Date().getTime(),
      },
      mixinParam: {
        a: 'a',
        b: 'a',
        c: 'a',
        d: 'a',
        e: 'a',
      },
    }
  },
  methods: {
    changeDate(date) {
      console.log(date)
    },
    dataReady() {
      console.log('数据都加载完毕！！！')
    },
  },
}
</script>

<style scoped>
.overview-box {
  height: 100%;
  background: #f5f6f7;
  box-sizing: border-box;
}
</style>
